<template>
  <div class="content-wrap flex" :class="props.isAi ? 'ai' : ''">
    <div class="chat-item-content">
      <div class="breakAll thinkking ">

        <AiLoading v-if="isLoading" :loading="thinkking"></AiLoading>

        <rich-text v-if="thinkking" :nodes="thinkContent"></rich-text>
      </div>

      <div v-if="content" class="chat-item-text breakAll" :class="{ answer_content: type == 'answer' && thinkking }">
        <mp-html v-if="content" :domain="''" :plugins="plugins" :content="htmlContent" :tag-style="{
          code: 'background-color: #f6f6f6;padding: 2px 4px;border-radius: 4px;',
          pre: 'padding: 10px;border-radius: 4px;background: #f6f6f6;',
          hr: 'margin: 10px 0;opacity:.85;',
          // h1: 'font-size:16px',
          // h2: 'font-size:14px;font-weight:normal;',
          h3: 'font-size: 16px;',
          // strong: 'font-size:14px'
        }" />
        <div v-else>ai正在回答中</div>
      </div>
      <p v-if="isStop && !content" class="chat-item-text">暂停回答中</p>
    </div>
  </div>
</template>

<script setup>
import { defineProps, computed } from 'vue';
// import mpHtml from '@/uni_modules/mp-html/components/mp-html/mp-html'
import mpHtml from '@/components/mp-html/components/mp-html/mp-html.vue';
import { marked } from 'marked'
import AiLoading from './AiLoading.vue';


const props = defineProps({
  content: String,
  thinkking: String,
  isAi: Boolean,
  type: String,
  isLoading: Boolean,
  isStop: Boolean
});
let thinkContent = computed(() => {
  const nodes = [{
    name: 'div',
    attrs: {
      style: 'color: rgba(255, 255, 255, .75);'
    },
    children: [{
      type: 'text',
      text: props.thinkking
    }]
  }]
  return nodes;
})
let htmlContent = computed(() => {
  return marked(props.content)
})
// 配置markdown插件
const plugins = [{
  name: 'markdown',
  options: {
    highlight: true, // 是否开启代码高亮
    fade: false, // 是否开启图片淡入效果
  }
}]
</script>

<style lang="less" scoped>
.content-wrap {
  flex-direction: row-reverse;

  .chat-item-content {
    display: flex;
    flex-direction: column;
    margin-top: 40rpx;
    background-color: var(--a-main-color);
    color: #fff;

  }
}

.ai {
  display: block;
  flex-direction: row;


  .chat-item-content {
    width: 100%;
    background-color: var(--a-main-box-bg-color);
    color: var(--a-one-text-color);
    border-radius: 0rpx 20rpx 20rpx 20rpx;

  }
}



.chat-item-content {
  // width: 504rpx;
  margin-bottom: 0.5rem;
  box-sizing: border-box;

  padding: 28rpx;
  border-radius: 20rpx 0rpx 20rpx 20rpx;
  font-size: 32rpx;
  display: inline-block;



}

.thinkking {
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  border-radius: 10rpx;
  padding: 20 0rpx;
  line-height: 1.75;
  font-size: 24rpx;
  color: rgba(255, 255, 255, .7);
}


.chat-item-text {
  line-height: 1.65;
}

.breakAll {
  word-break: break-word;
  overflow-wrap: break-word;
  width: 100%;
  word-wrap: break-word;
  white-space: break-spaces;
}

.answer_content {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  // border-top: 1px solid #ccc;

}

.chat-item-text {
  :deep(pre) {
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  :deep(code) {
    font-family: monospace;
  }

  :deep(blockquote) {
    border-left: 4px solid #ddd;
    padding-left: 10px;
    margin: 10px 0;
    color: #666;
  }
}
</style>